import React, { Component } from 'react';
import { StyleSheet, View,Text,Image,Dimensions,TouchableWithoutFeedback } from 'react-native';

import { connect } from 'react-redux';

import Icon from 'react-native-vector-icons/FontAwesome';
import AppStyle from '../styles/index';
import {txt,view} from '../comm/Size';

const { width, height } = Dimensions.get("window");

import {takePhoto,fromAlbum} from '../component/PhotoSelector';
import PhotoActionSheet from '../component/PhotoActionSheet';

import TopBar from '../component/TopBar';

import {Tool} from "../comm/util";

import { SideMenu,List, ListItem} from 'react-native-elements'

import SideMenuBar from './SideMenuBar'

import Store from '../component/Store'

class AppModule extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: Store.mime().name,
            remark: Store.mime().remark,
            isActionSheet: true,
            background: ""
        };
    }

    onPress = ()=> {
        this.props.navigation.navigate('TaskListPage')
    }

    changeBg = ()=> {
        this.ActionSheet.showActionSheet();
    }

    actionPress = (path)=> {
        this.setState({
            background: path
        })
    }

    render() {
        const {name,remark}=this.state;
        let source=this.state.background ?{uri:this.state.background}:require('../assets/homebg.jpg');
        return (
            <View style={styles.wrapper}>
                <TopBar
                    leftIcon={<Icon size={24} onPress={this.props.toggleSideMenu} color="#FFF" name="bars"></Icon>}
                    title="YouMe"
                />
                <View style={styles.container}>
                    <PhotoActionSheet
                        ref={o=>this.ActionSheet=o}
                        title="更换背景"
                        onSuccess={this.actionPress}
                    />
                    <View style={styles.headerContainer}>
                        <TouchableWithoutFeedback onPress={this.changeBg}>
                            <Image style={styles.myImageContainer}
                                   source={source}/>
                        </TouchableWithoutFeedback>
                        <View>
                            <Image style={styles.logo} source={require('../assets/logo.jpg')}></Image>
                        </View>
                    </View>
                    <View style={styles.infoContainer}>
                        <View style={styles.textWrap}>
                            <Text style={styles.text}>{name}</Text>
                        </View>
                        <View style={styles.textWrap}>
                            <Text style={[styles.text,styles.textMark]}>{remark}</Text>
                        </View>
                        <View style={styles.btnWrap}>
                            <TouchableWithoutFeedback onPress={this.onPress}>
                                <View>
                                    <Text style={styles.btn}>我的清单</Text>
                                </View>
                            </TouchableWithoutFeedback>
                        </View>
                    </View>
                </View>
            </View >
        )
    }
}


export default class HomePage extends Component {
    static navigationOptions = {
        title: 'Home',
        header: null
    }

    constructor(props) {
        super(props);
        this.state = {
            isOpen: false
        };
    }

    onSideMenuChange(isOpen) {
        this.setState({
            isOpen: isOpen
        })
    }

    toggleSideMenu() {
        this.setState({
            isOpen: !this.state.isOpen
        })
    }

    logout = ()=> {
        this.props.navigation.navigate('LoginPage')
    }

    render() {
        return <SideMenu
            isOpen={this.state.isOpen}
            onChange={this.onSideMenuChange.bind(this)}
            menu={<SideMenuBar navigation={this.props.navigation} onPress={this.logout}></SideMenuBar>}>
            <AppModule navigation={this.props.navigation} toggleSideMenu={this.toggleSideMenu.bind(this)}/>
        </SideMenu>
    }


}


const styles = StyleSheet.create({
    logo: {
        height: view(250),
        width: view(250),
        borderRadius: view(250),
        marginTop: (0 - view(125)),
        alignSelf: "center"
    },
    toolbar: {
        height: 30,
        backgroundColor: AppStyle.mainColor,
        justifyContent: "center",
        paddingLeft: 10
    },
    headerContainer: {
        height: view(762),
        width: width - 20,
        flexShrink: 0
    },
    myImageContainer: {
        marginTop: 0,
        height: view(762),
        width: width - 20
    },
    infoContainer: {
        flexGrow: 1,
        paddingTop: view(125)
    },
    textWrap: {
        height: view(60),
        justifyContent: "center"
    },
    text: {
        marginTop: 5,
        alignSelf: "center"
    },
    textName: {
        fontSize: 16,
        color: "#333"
    },
    textMark: {
        fontSize: 12,
        color: "#999"
    },
    btn: {
        marginTop: view(20),
        alignSelf: "center",
        borderWidth: 1,
        borderColor: AppStyle.mainColor,
        paddingTop: view(14),
        paddingBottom: view(14),
        width: view(650),
        color: AppStyle.mainColor,
        textAlign: "center"
    },
    appBtn: {
        marginTop: 20,
        paddingTop: view(14),
        paddingBottom: view(14),
        color: AppStyle.mainColor,
        width: 120,
        textAlign: "center"
    },
    wrapper: {
        flex: 1,
        backgroundColor: "#FFF",
    },
    container: {
        margin: 10,
        paddingBottom: 30,
        backgroundColor: "#FFF"
    }
})